<template>
  <div class="home">
    <div class="mt-[50px]">
      <div class="home-content">
        <div
          class="text-[#fff] text-[14px] font-medium flex items-center justify-center"
        >
          {{ $t("home.inviteReward") }}
        </div>
        <div
          class="mt-[10px] mb-[10px] font-bold flex items-center justify-center"
        >
          <p class="text-[#FFF066]">
            <span class="ft1 text-[46px]" @click="handleChange">{{
              data.invite_coins
            }}</span>
            <span class=" ">{{ $t("home.coins") }}</span>
          </p>
        </div>
        <div class="invite-code">
          <div class="code-box">
            <div class="code-content font-bold pb-[5px]">
              <div class="text">{{ $t("home.inviteCode") }}</div>
              <div class="number text-[#F24C28]">{{ data.invite_code }}</div>
              <div class="copy-btn" @click="handleCopy(data.invite_code)">
                <img
                  src="@/assets/image/Frame@2x(4).png"
                  class="w-[20px] h-[20px]"
                  alt=""
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="invite-btn h-[163px] mt-[10px] rounded-[10px] bg-[#fff] p-[15px] mx-[10px]"
      >
        <div class="flex justify-between">
          <div
            @click="handleItemClick(item.type)"
            class="flex flex-col items-center justify-center flex-1"
            v-for="item in itemList"
          >
            <p class="text-[#999999] text-[14px] font-medium">
              {{ $t(`home.inviteStats.${item.type}`) }}
            </p>
            <p class="mt-[15px] text-[#FF6607] text-[18px] font-bold">
              {{ item.number }}
            </p>
          </div>
        </div>
        <div class="invite-img" @click="handleInvite">
          {{ $t("home.inviteButton") }}
        </div>
      </div>
    </div>
    <div class="bg-[#fff] p-[15px] m-[10px] rounded-[10px]">
      <h2>{{ $t("home.howToInvite") }}</h2>
      <div class="flex items-stretch gap-[10px] mt-[10px]">
        <div class="m-h-[118px] flex-1 rounded-[8px] bg-[#FFF6F1] p-[8px]">
          <div class="flex items-center">
            <img
              src="@/assets/image/Frame@2x(1).png"
              class="w-[24px] h-[24px]"
              alt=""
            />
            <img
              src="@/assets/image/image@2x.png"
              class="w-[24px] h-[24px]"
              alt=""
            />
            <img
              src="@/assets/image/Frame@2x(2).png"
              class="w-[24px] h-[24px]"
              alt=""
            />
          </div>
          <div class="mt-[8px]">{{ $t("home.inviteSteps.step1") }}</div>
        </div>

        <div class="m-h-[118px] flex-1 rounded-[8px] bg-[#FFF6F1] p-[8px]">
          <div class="flex items-center justify-center">
            <img
              src="@/assets/image/Frame@2x(2).png"
              class="w-[24px] h-[24px]"
              alt=""
            />
          </div>
          <div class="mt-[8px]">{{ $t("home.inviteSteps.step2") }}</div>
        </div>

        <div class="m-h-[118px] flex-1 rounded-[8px] bg-[#FFF6F1] p-[8px]">
          <div class="flex items-center justify-center">
            <img
              src="@/assets/image/Frame@2x(3).png"
              class="w-[24px] h-[24px]"
              alt=""
            />
          </div>
          <div class="mt-[8px]">{{ $t("home.inviteSteps.step3") }}</div>
        </div>
      </div>
    </div>

    <div class="bg-[#fff] p-[15px] m-[10px] rounded-[10px]">
      <h2>{{ $t("home.rewardTitle") }}</h2>
      <div>
        <div
          v-for="(item, index) in steps"
          class="flex mt-[10px] items-center bg-[#FFF6F1] p-[15px] rounded-[8px]"
        >
          <div class="mr-[20px] text-center">
            <img src="@/assets/image/c1.png" class="w-[32px] h-[24px]" alt="" />
            <div class="text-[#FF4A22] text-[18px] font-bold mt-[5px]">
              {{ item.coins }}
            </div>
          </div>
          <div class="text-[14px]">
            {{ $t(`home.rewardSteps.step${index + 1}`) }}
          </div>
        </div>
      </div>
    </div>
    <div class="text-center bg-[#fff] rounded-[10px] p-[15px] m-[10px] mb-[20px]">
      <div class="text-center mb-[10px]">
        <h2>{{ $t("home.inviteTips.title") }}</h2>
      </div>
      <div class="text-[#666] text-[14px]">
        <div class="mb-[10px] text-left">{{ $t("home.inviteTips.tip1") }}</div>
        <div class="mb-[10px] text-left">{{ $t("home.inviteTips.tip2") }}</div>
        <div class="mb-[10px] text-left">{{ $t("home.inviteTips.tip3") }}</div>
        <div class="text-left">{{ $t("home.inviteTips.tip4") }}</div>
        <div class="mt-[10px] text-left">{{ $t("home.inviteTips.note") }}</div>
      </div>
    </div>
    <van-popup v-model:show="showInvite" round :style="{ padding: '15px' }">
      <div class="invite-popup w-[80vw]">

        <div class="text-[20px] font-bold text-center mb-[20px]">
          {{ $t("home.invitePopup.title") }}
        </div>
        <div class="text-[16px] text-[#666] mb-[15px]">
          {{ $t("home.invitePopup.recommendContent") }}
        </div>
        <div class="share-link bg-[#f5f5f5] p-[15px] min-h-[50px] rounded-[8px] mb-[20px]">
          <div class="text-[14px] break-all">
            {{newInvoteUrl}}
            
          </div>
        </div>
        <div
          class="copy-btn w-[100%] mx-auto rounded-[30px] bg-[#28C838] text-white text-center py-[12px] mb-[30px]"
          @click="copyit"
        >
          {{ $t("home.invitePopup.copyBtn") }}
        </div>
        <div>{{ $t("home.invitePopup.shareTo") }}</div>
        <div class="p-[10px] flex " >
          <div  class="flex-1 flex items-center justify-center"  v-for="item in shareList" @click="handleShare(item)">
            <van-image
            round
            class="w-[30px] "
          
            :src="item.icon"
          ></van-image>
          </div>
        </div>
        <div class="mt-[20px] text-center">
          <van-icon name="close" size="25" color="#666" @click="showInvite = false" />

        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import api from "@/api/api";
import { showToast } from "vant";
import { useI18n } from "vue-i18n";
const { t, locale } = useI18n();

onMounted(() => {});

const handleCopy = (code: string) => {
  // 复制功能实现
  navigator.clipboard.writeText(code);
  showToast(t("home.toast.copySuccess"));
};
const itemList = ref([
  {
    title: "我的好友",
    number: 0,
    type: "friends",
  },
  {
    title: "邀请收入",
    number: 0,
    type: "income",
  },
]);
const router = useRouter();
const handleItemClick = (type: string) => {
  console.log(type);
  router.push({
    path: "friend",
    query: {
      ...route.query
    }
  });
};
const handleChange = () => {
  router.push({
    path: "change",
    query: {
      ...route.query
    }
  });
};
const steps = ref([
  {
    // text: '好友绑定邀请的当天通过Level1，你立即获得该奖励',
    coins: 0,
  },
  {
    // text: '好友绑定邀请的当天通过Level3，你立即获得该奖励',
    coins: 0,
  },
  {
    // text: '好友绑定邀请的当天通过Level10，你立即获得该奖励',
    coins: 0,
  },
]);

const data = ref<any>({});
import { useAutoRequest } from "@/hooks/loading";
const [loading, invite] = useAutoRequest(api.invite);

const getData = async () => {
  const res = await invite({
    // 从路由参数中获取 package_name 和 device_id
    package_name: route.query.package_name,
    device_id: route.query.device_id
  });
  data.value = res;
  itemList.value[0].number = res.mentee_count;
  itemList.value[1].number = res.mentee_reward || 0;
  console.log(res);
  for (let i in steps.value) {
    console.log(i);
    steps.value[i].coins = res.invite_coins_stage[i];
  }
};




// 分享功能
const showInvite = ref(false);
const handleInvite = () => {
  // 展示邀请弹窗
  showInvite.value = true;
};

const shareList = ref([
  {
    type: 'whatsapp',
    icon: new URL("@/assets/image/share/WhatsApp-icon.png", import.meta.url).href,
  },
  {
    type: 'facebook',
    icon: new URL("@/assets/image/share/Facebook-icon.png", import.meta.url).href,
  },

  {
    type: 'twitter',
    icon: new URL("@/assets/image/share/Twitter-icon.png", import.meta.url).href,
  },
  {
    type: 'telegram',
    icon: new URL("@/assets/image/share/Telegram-icon.png", import.meta.url).href,
  },
  {
    type: 'copy',
    icon: new URL("@/assets/image/share/Link-Share-icon.png", import.meta.url).href,
  },
]);

const handleShare = (item: any) => {
  if (item.type === 'copy') {
    copyit();
    return;
  }

  // 定义应用和网页的URL schemes
  const urls = {
    whatsapp: {
      app: `whatsapp://send?text=${encodeURIComponent(data.value.invite_link)}`,
      web: `https://api.whatsapp.com/send?text=${encodeURIComponent(data.value.invite_link)}`
    },
    facebook: {
      app: `fb://share?link=${encodeURIComponent(data.value.invite_link)}`,
      web: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(data.value.invite_link)}`
    },
    twitter: {
      app: `twitter://post?message=${encodeURIComponent(data.value.invite_link)}`,
      web: `https://twitter.com/intent/tweet?url=${encodeURIComponent(data.value.invite_link)}`
    },
    telegram: {
      app: `tg://msg?text=${encodeURIComponent(data.value.invite_link)}`,
      web: `https://t.me/share/url?url=${encodeURIComponent(data.value.invite_link)}`
    }
  };

  // 尝试打开应用
  const tryOpenApp = () => {
    const now = Date.now();
    const timeout = 1000; // 超时时间1秒

    // 尝试打开应用
    window.location.href = urls[item.type].app;

    // 如果超时后页面还在，说明没有安装应用，转到网页版
    setTimeout(() => {
      if (Date.now() - now < timeout + 100) {
        window.location.href = urls[item.type].web;
      }
    }, timeout);
  };

  tryOpenApp();
};
const copyit = ()=> {
  handleCopy(newInvoteUrl.value);
  showToast(t('home.toast.copySuccess'));
}
const route = useRoute()
watchEffect(() => {
  const package_name = route.query.package_name
  const device_id = route.query.device_id
  if (device_id && package_name) {
    getData();
  }
});


const newInvoteUrl = computed(()=> {
  const item = data.value?.invite_slogan
  const word = item?.[locale.value]
  return word + ' ' + data.value.invite_link 
})
</script>

<style scoped lang="scss">
h2 {
  margin: 0;
}
.home {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(180deg, #f14c27 0%, #ff8e3d 75%, #f6f6f6 100%);
}

.ft1 {
  font-family: Source Han Sans CN, Source Han Sans CN;
}
.invite-code {
  display: flex;
  justify-content: center;
  align-items: center;
}
.code-box {
  position: relative;
  width: 260px;
  height: 51px;
  background: url("@/assets/image/7.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.code-content {
  gap: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-content {
  background: url("@/assets/image/6.png") no-repeat;
  background-size: 100% 100%;
  background-position: center center;
}
.invite-img {
  position: relative;
  background: url("@/assets/image/8.png") no-repeat;
  background-size: 100% 100%;
  height: 65px;
  margin-top: 15px;
  background-position: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 19px;
  font-weight: bold;
}

.invite-img::after {
  content: "";
  position: absolute;
  right: 25px;
  bottom: 8px;
  width: 34px;
  height: 34px;
  background: url("@/assets/image/9.png") no-repeat;
  background-size: contain;
}
.invite-img::before {
  content: "";
  position: absolute;
  left: 8px;
  bottom: 42px;
  width: 34px;
  height: 34px;
  background: url("@/assets/image/1.png") no-repeat;
  background-size: contain;
}
</style>
